<template>
	<view class="bg">
		<view class="xiala">
			<image src="../../static/table.png" style="width: 80rpx;height: 80rpx;"></image>
			  <view class="uni-form-item uni-column">
			          <picker @change="tableType" :range="tableTypeArray">
			              <label>桌子类型：</label>
			              <label class="">{{ tableTypeArrayType }}</label>
						  
			          </picker>
			  </view>
		</view>
			<view class="sm">
				<view class="shuoming">排号说明</view>
					<view class="shuoming1"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
						1.同一手机号在午市、晚市各市别，分别只能生成一个排号
						2.如需跨市别排号，请在下一个市别开始后排号
						3.就餐时间段：
						午市：09：00-15：59
						晚市：16：00-23：59
					</view>
			</view>
			<view class="sm1">
				<view class="shuoming">当前叫号</view>
					<view class="shuoming2"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
						小桌
						等待桌数：{{waitnum[0]}}桌
					</view>
					<view class="shuoming2"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
						中桌
						等待桌数：{{waitnum[1]}}桌
					</view>
					<view class="shuoming2"style="word-wrap: break-word;word-break: break-all;white-space: pre-line;">
						大桌
						等待桌数：{{waitnum[2]}}桌
					</view>
			</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				tableTypeArray:['小桌（1-3人）','中桌（4-6人）','大桌（7-9人）'],
				tableTypeIndex:0,
				tableTypeArrayType:'---请选择---',
				waitnum:[],
			};
		},
		onShow() {
			// var waitnum= uni.getStorageSync('waitnum');
			this.getQueuenum();
			// this.waitnum = uni.getStorageSync('waitnum');
			// console.log(waitnum);
		},
		methods: {
			tableType(e) {
			    this.tableTypeIndex = e.target.value;
			    this.tableTypeArrayType=this.tableTypeArray[this.tableTypeIndex]
			   },
			   onNavigationBarButtonTap(e){
							const _this = this;
							const token = uni.getStorageSync('token');
			   				   uni.showModal({
			   				   	content:'确定取号吗？',
			   				   	success:(res) => {
			   				   		if (res.confirm) {
			   				   			uni.request({
			   				   				url: 'http://10.50.28.38:8080/takeNumber',
			   				   				method: 'POST',
			   				   				data: {
			   				   					tableType : _this.tableTypeIndex, 
			   				   				},
			   				   				header: {
			   				   					'Content-Type':'application/json',
			   				   					Authorization: token
			   				   				},						
			   				   				success: (res) => {
												if(res.data.code == -9){
													uni.showToast({
														icon: 'none',
														title: '您已经取过号了',
														duration:2000,
													});
													return;
												}
			   				   					uni.showToast({
			   				   						title:"取号成功",
			   				   						icon:'none'
			   				   					})
			   				   					uni.reLaunch({
			   				   						url:'./home'
			   				   					})
			   				   					},
			   				   			fail: () => {console.log("失败")},
			   				   				complete: () => {}
			   				   			});
										
			   				   		}
			   				   	}
			   				   })
			   },
			   getQueuenum(){
				   var _this = this;
				   // var waitnum = uni.getStorageSync('waitnum');
				   			   		uni.request({
				   			   			url: 'http://10.50.28.38:8080/waitNumber',
				   			   			header: {
				   			   				Authorization: uni.getStorageSync('token'),
				   			   				'Content-Type':'application/json',
				   			   			},
				   			   			data: {
				   			   				data:_this.waitnum
				   			   			},
				   			   			success: (res) => {
				   			   				console.log(res.data.data)
											this.waitnum=res.data.data;
				   							// uni.setStorage({
				   							// 	key: 'waitnum',
				   							// 	data: res.data.data,
				   							// 	success: function () {
				   							// 		console.log(waitnum);	
				   							// 	}
				   							// });
				   			   			},
				   			   		})
			   }
			   
		}
}
</script>

<style lang="scss">
	.bg{
		width: 100vw;
		height: 100vh;
		background-color:#f3f3f3;
	}
	.xiala{
		border:2px solid grey;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.uni-form-item{
		// border:5px solid orange;
		margin-top: 20rpx;
	}
	.sm{
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
		box-sizing: border-box;
		// border:2px solid orange;
		.shuoming{
			text-align: center;
			margin-bottom: 10rpx;
			font-weight: bold;
			font-size: 40rpx;
		}
		.shuoming1{
			text-align: center;
		}
		.shuoming2{
			border:2px solid orange;
			display: flex;
			flex-direction: column;
			// justify-content: space-evenly;
			text-align: center;
			margin-top: 10rpx;
		}
	}
	.sm1{
		margin-top: 100rpx;
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx 2rpx rgba($color: #333, $alpha: 0.1);
		box-sizing: border-box;
		// border:2px solid orange;
		.shuoming{
			text-align: center;
			margin-bottom: 10rpx;
			font-weight: bold;
			font-size: 40rpx;
		}
	
		.shuoming2{
			border:2px solid orange;
			display: flex;
			flex-direction: column;
			height:100rpx;
			// justify-content: space-evenly;
			text-align: center;
			margin-top: 10rpx;
		}
	}
</style>
